﻿@page "/Demo_CustomDialog"

<h3>
	BlazorDialog
</h3>
<p>All dialogs support ESC/BACK button</p>

<table border="1" cellpadding="8">
	<tr>
		<th>
			Sample
		</th>
		<th>
			Description
		</th>
	</tr>
	<tr>
		<td>
			<button @onclick="Show_InlineDialog">Inline Dialog</button>
		</td>
		<td>
			The dialog code is inside this razor file
		</td>
	</tr>
	<tr>
		<td>
			<button @onclick="Show_BootstrapInlineDialog" class="btn btn-primary">Bootstrap Modal</button>
		</td>
		<td>
			Use bootstrap style
		</td>
	</tr>
	<tr>
		<td>
			<button @onclick="Show_RazorFileDialog">Razor File Dialog</button>
		</td>
		<td>
			Dialog code is inside <a style="text-decoration:underline;cursor:pointer" @onclick='()=> { MainLayout.ShowCode("Dialog_Dialog1"); }'>Dialog_Dialog1.razor</a>
		</td>
	</tr>
	<tr>
		<td>
			<button @onclick="Show_Dialog2">Custom Close</button>
		</td>
		<td>
			<a style="text-decoration:underline;cursor:pointer" @onclick='()=> { MainLayout.ShowCode("Dialog_Dialog2"); }'>Dialog_Dialog2.razor</a>
			shows how to prevent ESC/BACK button closing dialog
		</td>
	</tr>
	<tr>
		<td>
			<button @onclick="Show_Dialog3">FullPage Dialog</button>
		</td>
		<td>
			<a style="text-decoration:underline;cursor:pointer" @onclick='()=> { MainLayout.ShowCode("Dialog_Dialog3"); }'>Dialog_Dialog3.razor</a>
			show use full page dialog for Navigation
		</td>
	</tr>
</table>


@code{
	void Show_InlineDialog()
	{
		string nested_scope_message = "It's easy to use context data";

		BlazorDialog dlg = null;
		RenderFragment rf = __builder =>
		{
		<div style="min-width:320px;width:50%;height:50%;text-align:center;background-color:white;padding:32px;border-radius:5px;box-shadow:#999 1px 1px 6px">
			Press ESC or click browser BACK button to close this dialog;
			<br />
			<br />
			<button @onclick="()=>dlg.Close()">Or click this button</button>
			<br />
			<br />
			@nested_scope_message

		</div>
		};

		Action<BlazorDialog> dlgload = argdlg =>
		{
			dlg = argdlg;
			dlg.CancelHandler = delegate    //ESC or BACK button clicked
			{
				dlg.Close();
			};
		};

		BlazorSession.Current.ShowDialog(rf, dlgload);
	}

	void Show_BootstrapInlineDialog()
	{
		string nested_scope_message = "It's easy to use context data";

		BlazorDialog dlg = null;

		void CloseAnimate()
		{
			BlazorSession.Current.EvalCode(@"
var cl=document.getElementById(arguments[0]).querySelector('.modal').classList;
cl.remove('show');cl.add('hide')", dlg.ElementId);
			BlazorSession.Current.SetTimeout(300, delegate
			{
				dlg.Close();
			});
		}

		void DoSave()
		{
			BlazorSession.Current.Alert("DONE", "Data saved successfuly.", delegate
			{
				CloseAnimate();
			});
		}

		RenderFragment rf = __builder =>
		{
		<div class="modal fade" bp-dialog-load="this.classList.add('show')" style="display:block">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">HeaderText</h4>
						<button type="button" class="close" @onclick="CloseAnimate">&times;</button>
					</div>
					<div class="modal-body">
						@nested_scope_message
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" @onclick="CloseAnimate">Close</button>
						<button type="button" class="btn btn-primary" @onclick="DoSave">Save</button>
					</div>
				</div>
			</div>
		</div>
		};

		Action<BlazorDialog> dlgload = argdlg =>
		{
			dlg = argdlg;
			dlg.CancelHandler = delegate    //ESC or BACK button clicked
			{
				CloseAnimate();
			};
		};

		BlazorSession.Current.ShowDialog(rf, dlgload);
	}


	void Show_RazorFileDialog()
	{
		BlazorSession.Current.ShowDialog<Dialog_Dialog1>((control, dlg) =>
		{
			control.Message = "Hello...";
			dlg.CancelHandler = delegate
			{
				dlg.Close();
			};
		});
	}

	void Show_Dialog2()
	{
		BlazorSession.Current.ShowDialog<Dialog_Dialog2>((control, dlg) =>
		{
			control.Message = "World...";

			dlg.CloseCalled += delegate
			{
				BlazorSession.Current.Toast("Yes, I know dialog closed");
			};
		});
	}

	void Show_Dialog3()
	{
		BlazorSession.Current.ShowDialog<Dialog_Dialog3>((control, dlg) =>
		{
			control.Message = "CustomDialog";
		});
	}
}






<br />
<hr />
<br />

<h3>Url State Dialog <span style="color:red">Important</span></h3>
<p>
	If dialog is showed by the URL , when page refresh, it will be show again.
</p>
<p>
	The Dialog must provide RouteAttribute <span style="color:darkcyan;background-color:#eee">@@page "/Dialog_Dialog4"</span>
</p>

<table border="1" cellpadding="8">
	<tr>
		<th>
			Sample
		</th>
		<th>
			Description
		</th>
	</tr>
	<tr>
		<td>
			<button @onclick="Show_Dialog4">DefaultLayout</button>
		</td>
		<td>
			<a style="text-decoration:underline;cursor:pointer" @onclick='()=> { MainLayout.ShowCode("Dialog_Dialog4"); }'>Dialog_Dialog4.razor</a>
			use @@page "/Dialog_Dialog4" to accept the URL

			<br />
			Use @@layout DialogLayout for another layout :

			<a style="text-decoration:underline;cursor:pointer" @onclick='()=> { MainLayout.ShowCode("DialogLayout"); }'>DialogLayout.razor</a>

		</td>
	</tr>
	<tr>
		<td>
			<button @onclick="DoTestParam">Test Param</button>
		</td>
		<td>
			Use route "/Dialog_Dialog4/{Message}/" to pass parameter
		</td>
	</tr>
</table>
<br/>
<p>
	The difference of Url Dialog and Link Navigation is that the Url Dialog keeps the caller UI open.
</p>


@code{



	void Show_Dialog4()
	{
		BlazorSession.Current.ShowDialog("/Dialog_Dialog4");

	}

	void DoTestParam()
	{
		BlazorSession.Current.ShowDialog("/Dialog_Dialog4/ParamIsHello");
	}


}